<template>
  <div class="login">
    <header-v></header-v>
    <Content>
      <Row
        class="bg"
        type="flex"
        align="middle"
        justify="end"
        style="height:750px;"
      >
        <Col
          style="width:500px;margin-right:260px"
        >
        <Card :bordered="false" :padding="0" style="height: 540px;">
          <div style="text-align:center;margin-bottom: 30px;">
            <img src="../../assets/headerLogin_log.png" style="width:300px;height: 60px;">
          </div>
          <p class="password">密码登陆</p>
          <Form
            ref="formItem"
            :model="formItem"
            :rules="ruleInline"
            :label-width="30"
            class="form"
          >
            <FormItem prop="userName">
              <Input
                type="text"
                v-model="formItem.userName"
                placeholder="请输入账号"
                prefix="ios-person"
                class="input"
              >
              </Input>
            </FormItem>
            <FormItem prop="passWord">
              <Input
                type="password"
                v-model="formItem.passWord"
                placeholder="请输入密码"
                prefix="ios-lock"
              >
              </Input>
            </FormItem>
            <FormItem>
              <Row>
                <Col span="8">
                <CheckboxGroup v-model="formItem.checkbox">
                  <Checkbox label="记住密码"></Checkbox>
                </CheckboxGroup>
                </Col>
                <Col
                  span="8"
                  style="text-align:right"
                >
                <span
                  style="cursor:pointer"
                  @click="toForget"
                > 忘记密码</span>
                </Col>
                <Col
                  span="8"
                  style="text-align:right"
                >
                <span
                  style="cursor:pointer"
                  @click="toRegister"
                > 注册</span>
                </Col>
              </Row>
            </FormItem>
            <FormItem>
              <Button
                type="primary"
                long
                @click="handleSubmit('formItem')"
              >登陆</Button>
            </FormItem>
          </Form>
        </Card>
        </Col>
      </Row>
    </Content>
    <footer-v></footer-v>
  </div>
</template>

<script>
import HeaderV from '../../components/login/main_header'
import FooterV from '../../components/login/main_footer'
export default {
  components: {
    HeaderV,
    FooterV
  },
  data() {
    return {
      formItem: {
        userName: "",
        passWord: "",
        checkbox: []
      },
      ruleInline: {
        userName: [
          {
            required: true,
            message: "用户名不能为空",
            trigger: "blur"
          }
        ],
        passWord: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "密码长度不能小于6位",
            trigger: "blur"
          }
        ]
      }
    }
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        // if (valid) {
        //  this.$axios.post('/user/login',this.formItem).then(res => {
        //    console.log(res)
        //  })
        // } else {
        //   this.$Message.error("输入有误");
        // }
        this.$router.push({
          name:'index'
        })
      });
    },
    toForget() {
      this.$router.push({
        name: "forget"
      })
    },
    toRegister() {
      this.$router.push({
        name: "register"
      })
    }
  }
}
</script>

<style lang="less">
.login {
  .bg {
  background: url("../../assets/contentLogin.jpg") no-repeat center;
  background-size: 100% 100%;
  .password { 
      font-size: 26px;
      font-weight: 700;
      padding:0 0 30px 30px;
      border-bottom: 1px solid #ccc;
  }
  .form {
    margin-right: 30px;
    .input {
          margin-top: 30px;
    }
  }
}
 .ivu-input-prefix {
    i {
      font-size: 40px;
      line-height: 60px;
      color: #ccc;
      padding-left: 25px;

    }
  } 
  .ivu-input-with-prefix {
    padding-left: 80px;
  }
  .ivu-input {
    height: 60px;
  }
  .ivu-btn-primary {
    background-color: #5b84ac;
    border-color: #5b84ac;
  }
  .ivu-btn-long {
    height: 60px;
    span {
      font-size: 22px;
    }
  }
}


</style>